<!-- 未审批请假 -->
<template>
  <div class="lea-task">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>

    <div class="content">
      <!-- 查询内容 -->
      <van-cell title="查询内容" is-link :value="proName" @click="showSearch = true" />
      <!-- 未审批请假列表 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item,index) in list" :key="index">
          <template #title>
            <div class="van-title">
              <div class="van-top">
                <van-checkbox v-model="item.isState" ref="checkboxGroup" checked-color="burlywood"></van-checkbox>
                <span @click="toDetail(item)">
                  <van-tag plain type="primary" color="burlywood">{{ index + 1 }}</van-tag>
                  <span class="custom-title">{{ item.leaveBeginDate | filterTime }} 至 </span>
                  <span class="custom-title">{{ item.leaveEndDate | filterTime }}</span>
                </span>
              </div>
              <span class="cust-title">{{ item.detailReason }}</span>
            </div>
          </template>
          <template #label>
            <van-tag plain type="primary" color="burlywood">{{ item.proName }}</van-tag>
            <van-tag plain type="primary" color="burlywood">{{ item.leaveTypeName }}</van-tag>
          </template>
        </van-cell>
      </van-list>
      <!-- 底部的按键 -->
      <van-submit-bar button-text="审批" @submit="onSubmit1" button-color="burlywood">
        <van-checkbox v-model="allChecked" @change="checkAll" checked-color="burlywood">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <!-- 查询内容弹出层 -->
    <van-popup v-model="showSearch" position="bottom">
      <van-field readonly clickable :value="proName" label="查询人员:" name="proName" placeholder="点击选择查询人员"
        @click="openPeo" />
      <van-field readonly clickable name="leaveBeginDate" :value="searchObj.leaveBeginDate" label="查询日期"
        placeholder="点击选择查询区间日期" @click="showCalendar = true" />
      <div class="task-btn">
        <van-button type="info" size="small" block color="burlywood" @click="search">查询</van-button>
      </div>
    </van-popup>
    <!-- 审核弹出层 -->
    <van-popup v-model="showCost" position="bottom">
      <van-field v-model="examine.comment" label="审核意见:" name="depComment" />
      <van-field name="checkbox" label="审核结果">
        <template #input>
          <van-checkbox v-model="examine.result" shape="square" checked-color="burlywood" />
        </template>
      </van-field>
      <div class="task-btn">
        <van-button type="info" size="small" block color="burlywood" @click="onSubmit2">审核</van-button>
      </div>
    </van-popup>
    <!-- 查询人员选择器 -->
    <van-popup v-model="peoShowPicker" position="bottom">
      <van-picker show-toolbar :columns="peoColumns" @confirm="peoOnConfirm" @cancel="peoShowPicker = false"
        v-if="peoColumns.length > 0" />
      <van-empty description="暂无数据" v-else />
    </van-popup>
    <!-- 日期选择器 -->
    <van-calendar v-model="showCalendar" :min-date="minDate" :max-date="maxDate" type="range" color="burlywood"
      @confirm="onConfirm" />
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { getStaffAPILeave, GetTechnician, LeaveApproval } from '@/request/api'

export default {
  name: 'LeaTask',
  components: {
    TopHeader
  },
  filters: {
    filterTime (val) {
      return val.slice(0, 10)
    }
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      loading: false,
      finished: false, // 请假列表是否已经加载完
      list: [], // 请假数据总量
      listId: [], // 提交审核选择id集合
      showCost: false, // 审核弹出层是否显示
      examine: { // 审核弹出层表单数据
        comment: '同意',
        result: true
      },

      peoShowPicker: false, // 查询人员选择器是否显示
      proName: '', // 查询人员名称
      showSearch: false, // 查询内容弹框是否显示
      showCalendar: false, // 日期选择器是否显示
      searchObj: { // 查询内容弹出层表单数据
        Id: '',
        leaveBeginDate: ''
      },
      minDate: new Date(2020, 9, 1), // 日期最小值
      maxDate: new Date(2030, 10, 1), // 日期最大值
      peoColumns: [], // 查询人员选择器数据
      serCount: 0, // 请假列表数据总量
      pageIndex: 0, // 当前页数
      allChecked: false // 是否全选
    }
  },
  created () {
    this.getLeaveList()
  },
  methods: {
    // 获取请假数据
    getLeaveList (val) {
      // 有查询条件
      if (val) {
        console.log(val)
        const param = {
          Id: val.Id,
          beginDate: val.leaveBeginDate.split('-')[0],
          endDate: val.leaveBeginDate.split('-')[1],
          page: 0,
          pageCount: 10
        }
        getStaffAPILeave(param).then(res => {
          console.log(res)
          if (res.Tag === 1) {
            this.list = res.Data
          }
        })
        // 无查询条件
      } else {
        getStaffAPILeave({}).then(res => {
          console.log(res)
          if (res.Tag === 1) {
            this.list = res.Data
          }
        })
      }
    },
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        this.pageIndex++
        const param = { Id: '', formId: '', page: this.pageIndex, pageCount: 10 }
        getStaffAPILeave(param).then(res => {
          this.list = [...this.list, ...res.Data]
        })
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (10 * (this.pageIndex + 1) >= this.serCount) {
          this.finished = true
        }
      }, 1000)
    },
    // 点击查询人员选择
    openPeo () {
      this.getPeo()
      this.peoShowPicker = true
    },
    // 获取查询人员数据
    getPeo () {
      this.peoColumns = []
      const param = { 'stype': 'skills', page: 0, pageCount: 10 }
      GetTechnician(param).then(res => {
        console.log(res)
        if (res.Message === '查询成功') {
          console.log(res.Data)
          this.peoColumns = res.Data.map(item => {
            return {
              text: item.Name,
              value: item.Id
            }
          })
        }
      })
    },
    // 查询人员选择器
    peoOnConfirm (value) {
      if (value) {
        console.log(value)
        this.proName = value.text
        this.searchObj.Id = value.value
        this.peoShowPicker = false
      }
    },
    // 日期转换
    formatDate (date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    // 日期选择器
    onConfirm (date) {
      const [start, end] = date
      this.showCalendar = false
      this.searchObj.leaveBeginDate = `${this.formatDate(start)} - ${this.formatDate(end)}`
    },
    // 点击查询按键
    search () {
      if (this.searchObj.Id && this.searchObj.leaveBeginDate) {
        this.getLeaveList(this.searchObj)
        this.showSearch = false
      } else {
        this.$toast('请先选择查询人员和查询日期')
      }
    },
    // 跳转到详情页
    toDetail (value) {
      console.log('跳转到详情页', value)
      sessionStorage.setItem('DATA', JSON.stringify(value))
      this.$router.push({ path: '/leaDetail' })
    },
    // 数据全选
    checkAll (flag) {
      this.list.forEach((item, index) => {
        if (flag) {
          item.isState = true
        } else {
          item.isState = false
        }
      })
      this.list = Object.assign([], this.list)
    },
    // 表单提交
    onSubmit1 () {
      const lis = []
      this.list.forEach(item => {
        if (item.isState) {
          lis.push(item.id)
        }
      })
      this.listId = lis
      if (lis.length > 0) {
        this.showCost = true
      } else {
        this.$toast('请先选择请假表单')
      }
    },
    // 审核按钮触发事件
    onSubmit2 () {
      if (this.examine.comment) {
        this.$dialog.confirm({
          title: '提示',
          message: '您确定要提交请假审核吗?',
          confirmButtonColor: 'burlywood'
        }).then(() => {
          const param = {
            leaveListId: this.listId,
            comment: this.examine.comment,
            result: this.examine.result,
            approver: sessionStorage.getItem('userId')
          }
          console.log(param)
          LeaveApproval(param).then(res => {
            console.log(res)
            if (res.Tag === 1) {
              this.$toast('审核成功')
              this.$router.push({ path: '/LeavePass' })
            }
          })
        }).catch(() => { })
      } else {
        this.$toast('请先输入审核意见')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.lea-task {
  width: 100%;
  height: 100%;
  .content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 1.2rem);
    .van-list {
      flex: 1;
      overflow: auto;
      .van-cell {
        .van-cell__title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .van-title {
            display: flex;
            .van-top {
              flex: 1;
              display: flex;
              align-items: center;
              .van-tag {
                margin-left: 2px;
              }
            }
            .cust-title {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: right;
            }
          }
          .van-tag {
            margin-right: 2px;
          }
          .van-cell__label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .van-tag:last-child {
              float: right;
            }
          }
        }
      }
    }
    .van-submit-bar {
      .van-submit-bar__bar {
        justify-content: space-between;
      }
    }
  }
}
</style>
